<template>
	<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" tools="search" :defaultSearch="state.keyword"
		@search="onSearch">
		<view class="container">
			<!-- Tabs 导航部分 -->
			<view>
				<scroll-view class="tabs" horizontal scroll-x scroll-with-animation :scroll-into-view="currentTab">
					<view v-for="(tab, index) in tabs" :key="index" :id="'tab' + index" class="tab-item"
						:class="{ active: currentTab === 'tab' + index }" @tap="changeTab(index)">
						{{ tab.name }}
					</view>
				</scroll-view>
			</view>
			
			<view  v-for="item in state.pagination.list" class="second-card-item">
				<second-card :data="item"></second-card>
			</view>

			<view class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': 'var(--ui-BG-Main)' }"
				@click="push">
				<uni-icons class="fab-circle-icon" type="plusempty" color="#fff" size="20"></uni-icons>
			</view>

		</view>
	</s-layout>

</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import SecondProductApi from '@/sheep/api/second/product.js';
	import sheep from '@/sheep';
	import _ from 'lodash-es';
	import SecondCard from './components/list/card.vue'
	const state = reactive({
		pagination: {
		  list: [],
		  total: 0,
		  pageNo: 1,
		  pageSize: 6,
		},
		keyword: '',
		loadStatus: '',
	});
	
	// 定义tabs数据
	const tabs = ref([{
			name: '最新',
			content: 'Content 1',
			id: 0
		},{
			name: '电子产品',
			content: 'Content 1',
			id: 1
		},
		{
			name: '家具家居',
			content: 'Content 2',
			id: 2
		},
		{
			name: '服装服饰',
			content: 'Content 3',
			id: 3
		},
		{
			name: '母婴用品',
			content: 'Content 4',
			id: 4
		},
		{
			name: '运动户外',
			content: 'Content 4',
			id: 5
		},
		{
			name: '其他',
			content: 'Content 4',
			id: 6
		},
	]);
	
	const getPage = async () => {
		const { code, data } = await SecondProductApi.getSecondProductPage({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		})
		if (code !== 0) {
		  return;
		}
		state.pagination.list = _.concat(state.pagination.list, data.list);
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}
	getPage()
	
	const push =()=>{
		sheep.$router.go('/pages/second/push', {
		});
	}

	// 当前tab索引
	const currentIndex = ref(0);

	// 计算当前tab的ID
	const currentTab = computed(() => 'tab' + currentIndex.value);

	// 切换tab的函数
	const changeTab = (index) => {
		currentIndex.value = index;
	};

	// 监听Swiper滑动事件
	const onSwiperChange = (e) => {
		currentIndex.value = e.detail.current;
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
	}
	
	.second-card-item{
		+.second-card-item{
			margin-top: 20rpx;
		}
	}

	.tabs {
		display: flex;
		height: 50px;
		white-space: nowrap;
		border-bottom: 1px solid #eee;
		background-color: #fff;
	}

	.uni-fab__circle {
		position: fixed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		background-color: #3c3e49;
		border-radius: 50%;
		z-index: 13;
		right: 80rpx;
		bottom: 80rpx;
	}

	.tab-item {
		padding: 10px 20px;
		font-size: 16px;
		color: #666;
		width: 120rpx;
		display: inline-block;
		text-align: center;
	}

	.tab-item.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
	}

	.swiper {
		height: calc(100% - 50px);
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
</style>